import * as THREE from 'three'
import {useCallback, useEffect, useRef, useState} from "react";
import './../index.less'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

import scene_left from './images/scene_left.jpg'
import scene_right from './images/scene_right.jpg'
import scene_top from './images/scene_top.jpg'
import scene_bottom from './images/scene_bottom.jpg'
import scene_front from './images/scene_front.jpg'
import scene_back from './images/scene_back.jpg'

const Do = () => {
    const Body = useRef<HTMLDivElement>(null)
    //场景
    const Scene = useRef(new THREE.Scene()).current
    //摄像机
    const Camera = useRef(new THREE.PerspectiveCamera()).current
    //渲染器
    const Render = useRef(new THREE.WebGL1Renderer({antialias: true})).current
    let iscontrols: any = null

    //物体
    // const materials = useRef<any>([]).current
    //初始化
    const init = useCallback(() => {
        if (Body.current) {
            Render.setClearColor(new THREE.Color(0xbfd1e5))
            Render.setPixelRatio(window.devicePixelRatio);
            // Render.setSize(window.innerWidth, window.innerHeight);
            Render.setSize(Body.current?.offsetWidth, Body.current?.offsetHeight)
            //设置相机参数
            Camera.aspect = Body.current?.offsetWidth / Body.current?.offsetHeight
            Camera.fov = 90
            Camera.near = 0.1
            Camera.far = 100
            // Camera.position.set(0, 0, 0.01);
            Camera.position.x = 0
            Camera.position.y = 0
            Camera.position.z = 0.01;
            Camera.lookAt(Scene.position)
            Camera.updateProjectionMatrix()

            // 设置方位
            const controls = new OrbitControls(Camera, Render.domElement)
            iscontrols = controls
            controls.enableZoom = false;
            controls.enablePan = false;
            controls.enableDamping = true;
            controls.rotateSpeed = -0.25;

            isBox()
            loop()
        }
    }, [Render, Body])
    //帧同步重绘
    const loop = () => {
        requestAnimationFrame(loop);
        Render.render(Scene, Camera)
    }
    const isBox = () => {
        let materials = []
        //根据左右上下前后的顺序构建六个面的材质集
        const texture_left = new THREE.TextureLoader().load(scene_left);
        materials.push(new THREE.MeshBasicMaterial({map: texture_left}));

        const texture_right = new THREE.TextureLoader().load(scene_right);
        materials.push(new THREE.MeshBasicMaterial({map: texture_right}));

        const texture_top = new THREE.TextureLoader().load(scene_top);
        materials.push(new THREE.MeshBasicMaterial({map: texture_top}));

        const texture_bottom = new THREE.TextureLoader().load(scene_bottom);
        materials.push(new THREE.MeshBasicMaterial({map: texture_bottom}));

        const texture_front = new THREE.TextureLoader().load(scene_front);
        materials.push(new THREE.MeshBasicMaterial({map: texture_front}));

        const texture_back = new THREE.TextureLoader().load(scene_back);
        materials.push(new THREE.MeshBasicMaterial({map: texture_back}));
        const box: any = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1,), materials)
        box.material.wireframe = true
        Scene.add(box);
        // 反转
        box.geometry.scale(1, 1, -1)
        Camera.position.set(0, 0, 0.01)

    }

    // 实现窗口大小改变的时候改变全景图的显示大小
    const onWindowResize = () => {
        if (Body.current) {
            Camera.aspect = Body.current?.offsetWidth / Body.current?.offsetHeight
            Camera.updateProjectionMatrix()
            Render.setSize(Body.current?.offsetWidth, Body.current?.offsetHeight)
        }
    }
    // 逐帧渲染
    const animate = () => {
        requestAnimationFrame(animate);
        // const controls = new OrbitControls(Camera, Render.domElement)
        iscontrols.update(); // required when damping is enabled
        Render.render(Scene, Camera)

    }
    useEffect(() => {
        Body.current?.appendChild(Render.domElement)
        init()
        animate();
        window.addEventListener('resize', onWindowResize, false)
    }, [])
    return (<div className={"three-3d-warp"} ref={Body}></div>)
}
export default Do
